<template>
  <footer class="footer">
    <div class="footer-background">
      <div class="footer-pattern"></div>
    </div>

    <div class="container">
      <div class="footer-content">
        <div class="footer-section footer-brand">
          <h3 class="footer-logo">
            <span class="logo-gradient">Alex Chen</span>
          </h3>
          <p class="footer-description">
            专注于Vue.js和TypeScript的前端开发工程师，致力于创造卓越的用户体验和高效的Web应用。
          </p>
          <div class="footer-social">
            <a
              v-for="social in socialLinks"
              :key="social.name"
              :href="social.url"
              :title="social.name"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
              @mouseenter="hoverSocial = social.name"
              @mouseleave="hoverSocial = null"
            >
              <div
                class="social-icon"
                :class="{ 'social-icon-active': hoverSocial === social.name }"
              >
                <component :is="social.icon" />
              </div>
            </a>
          </div>
        </div>

        <div class="footer-section footer-links">
          <h4 class="footer-heading">快速导航</h4>
          <ul class="footer-nav">
            <li v-for="link in footerNav" :key="link.id">
              <a
                :href="`#${link.id}`"
                class="footer-nav-link"
                @click="scrollToSection(link.id)"
              >
                {{ link.label }}
              </a>
            </li>
          </ul>
        </div>

        <div class="footer-section footer-tech">
          <h4 class="footer-heading">技术栈</h4>
          <ul class="tech-list">
            <li v-for="tech in techStack" :key="tech">
              <CheckCircleOutlined />
              {{ tech }}
            </li>
          </ul>
        </div>

        <div class="footer-section footer-stats">
          <h4 class="footer-heading">网站统计</h4>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ siteStats.projects }}</div>
              <div class="stat-label">完成项目</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ siteStats.experience }}</div>
              <div class="stat-label">开发经验</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ siteStats.clients }}</div>
              <div class="stat-label">服务客户</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ siteStats.satisfaction }}%</div>
              <div class="stat-label">客户满意度</div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-divider"></div>

      <div class="footer-bottom">
        <div class="footer-bottom-content">
          <p class="copyright">
            © {{ currentYear }} Alex Chen. All rights reserved.
          </p>
          <div class="footer-bottom-links">
            <a
              v-for="link in bottomLinks"
              :key="link.name"
              :href="link.url"
              class="bottom-link"
            >
              {{ link.name }}
            </a>
          </div>
        </div>
        <div class="footer-built-with">
          <span class="built-with-text">Built with</span>
          <div class="tech-icons">
            <div
              v-for="tech in builtWithTech"
              :key="tech.name"
              class="tech-icon"
              :title="tech.name"
            >
              <component :is="tech.icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  GithubOutlined,
  LinkedinOutlined,
  TwitterOutlined,
  WechatOutlined,
  MailOutlined,
  CheckCircleOutlined,
  // VuejsOutlined,
  CodeOutlined
} from '@ant-design/icons-vue'

interface SocialLink {
  name: string
  url: string
  icon: any
}

interface NavLink {
  id: string
  label: string
}

interface BottomLink {
  name: string
  url: string
}

interface BuiltWithTech {
  name: string
  icon: any
}

interface SiteStats {
  projects: number
  experience: number
  clients: number
  satisfaction: number
}

const hoverSocial = ref<string | null>(null)

const socialLinks: SocialLink[] = [
  {
    name: 'GitHub',
    url: 'https://github.com/alexchen',
    icon: GithubOutlined
  },
  {
    name: 'LinkedIn',
    url: 'https://linkedin.com/in/alexchen',
    icon: LinkedinOutlined
  },
  {
    name: 'Twitter',
    url: 'https://twitter.com/alexchen_dev',
    icon: TwitterOutlined
  },
  {
    name: '微信',
    url: 'https://example.com/wechat',
    icon: WechatOutlined
  }
]

const footerNav: NavLink[] = [
  { id: 'home', label: '首页' },
  { id: 'about', label: '关于我' },
  { id: 'projects', label: '项目' },
  { id: 'contact', label: '联系' }
]

const techStack: string[] = [
  'Vue.js 3',
  'TypeScript',
  'Ant Design Vue',
  'Pinia',
  'Vite',
  'Node.js'
]

const siteStats: SiteStats = {
  projects: 50,
  experience: 3,
  clients: 30,
  satisfaction: 98
}

const bottomLinks: BottomLink[] = [
  { name: '隐私政策', url: '/privacy' },
  { name: '使用条款', url: '/terms' },
  { name: '网站地图', url: '/sitemap' }
]

const builtWithTech: BuiltWithTech[] = [
  { name: 'Vue.js', icon: CodeOutlined },
  { name: 'TypeScript', icon: CodeOutlined },
  { name: 'Vite', icon: CodeOutlined }
]

const currentYear = computed(() => new Date().getFullYear())

const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

<style scoped>
.footer {
  position: relative;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  color: white;
  padding: 4rem 0 2rem;
  overflow: hidden;
}

.footer-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
}

.footer-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.logo-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-description {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-icon {
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.social-icon-active {
  transform: scale(1.2);
}

.footer-heading {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: white;
}

.footer-nav,
.tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: block;
  padding: 0.25rem 0;
}

.footer-nav-link:hover {
  color: white;
  transform: translateX(5px);
}

.tech-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.tech-list li svg {
  color: #52c41a;
  font-size: 0.9rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 2rem 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.copyright {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 1rem;
}

.bottom-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.bottom-link:hover {
  color: white;
}

.footer-built-with {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.built-with-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

.tech-icons {
  display: flex;
  gap: 0.5rem;
}

.tech-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.tech-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>

<style>
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --bg-primary: #ffffff;
  --bg-secondary: #f7fafc;
}
</style>